<template>
  <div class="shop-food-supervision">
    <div class="title">
      <span class="publicity">食品监督安全公示</span>
      <span class="authentication" @click="handleSkipShopSafe" v-if="!$route.path.includes('shopSafe')">
        <span> 企业认证详情 </span>
        <i class="arrow"></i>
      </span>
    </div>
    <div class="supervise">
        <svg class="svg">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#we" v-if="status === 1"></use>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f" v-else></use>
        </svg>
      <div class="text">
        <div class="result">
          <span> 监督检查结果： </span>
          <span :style="{ color: status === 1 ? '#7ed321' : '#d0021b' }">{{
            result
          }}</span>
        </div>
        <div class="date"><span> 检查日期：</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import MySvg from 'components/content/svg/MySvg'
export default {
  props: {
    status: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    result() {
      return this.status === 1 ? "良好" : "差";
    },
  },
  methods: {
    handleSkipShopSafe() {
      this.$router.push('/shop/shopDetail/shopSafe')
    }
  },
  components: {
    MySvg
  }
};
</script>
<style lang="less" scoped>
.shop-food-supervision {
  margin-bottom: 10px;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
    .publicity {
      font-size: 18px;
      color: #333333;
    }
    .authentication {
      margin-right: 10px;
      font-size: 16px;
      color: #bbbbbb;
      .arrow {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-top: 1px solid #bbbbbb;
        border-left: 1px solid #bbbbbb;
        transform: rotate(135deg);
      }
    }
  }
  .supervise {
    display: flex;
    padding: 20px 10px;
    .svg {
      width: 50px;
      height: 50px;
    }
    .text {
      margin-left: 20px;
      font-size: 12px;
      .result, .date {
        margin-top: 10px;
      }
    }
  }
}
</style>